<script setup>
import { ref, computed } from 'vue'
import Sidebar from './Sidebar.vue'
import Header from './Header.vue'
import TagsView from './TagsView.vue'

// 侧边栏状态
const isCollapse = ref(false)

// 切换侧边栏
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 面包屑数据
const breadcrumbs = computed(() => {
  // 这里应该根据实际路由配置生成面包屑
  // 现在是简化实现，实际项目中可能需要更复杂的逻辑
  return []
})
</script>

<template>
  <div class="layout-container">
    <div class="main-container">
      <!-- 侧边栏 -->
      <Sidebar v-model:collapse="isCollapse" @toggle-sidebar="toggleSidebar" />
      
      <div class="right-container">
        <!-- 顶部导航栏 -->
        <Header :is-collapse="isCollapse" @toggle-sidebar="toggleSidebar" />
        
        <!-- 标签栏 -->
        <TagsView />
        
        <!-- 主内容区域 -->
        <div class="content-container" :class="{ 'content-collapse': isCollapse }">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.main-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.right-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%; /* 确保右侧容器占满高度 */
}

/* 主内容区域样式 */
.content-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
  box-sizing: border-box;
  height: calc(100% - 94px); /* 减去顶部导航栏和标签栏的高度 */
}

.content-collapse {
  margin-left: 0;
}
</style>